vue-fuse

使用Fuse.js做模糊查詢的元件

Github

shayneo/vue-fuse

範例

HTML

<vue-fuse placeholder="Search role from Star Wars" :list="starwars" :keys="['name','gender']" event-name="fuseSearch"></vue-fuse>

<table class="table">
    <tbody>
        <tr v-for="ppl in results">
            <td>{{ ppl.name }}</td>
            <td>{{ ppl.gender }}</td>
            <td><img :src="ppl.img" style="width:50px;height:50px;" /></td>
        </tr>
    </tbody>
</table>

JS

const FOO_DATA = [{
        name: 'Luke Skywalker',
        gender: 'male',
        img: 'https://goo.gl/KEUxHN'
    },
    ...
];

var app = new Vue({
    el: "#app",
    data: {
        starwars: [],
        results: [],
    },
    created() {
        var vm = this;
        vm.starwars = FOO_DATA;

        this.$on('fuseSearch', results => {
            this.results = results
        })
    }
})

結果如下：

Props

以下列出幾個較常用的屬性。

可藉由location,threshold,distance,,改變模糊搜尋的係數。
完整的Props可參考作者的Github。

另外也可以直接觸發Fuse.js的搜尋方法：

Vue.prototype.$search = function (term, list, options) {
    return new Promise(function (resolve, reject) {
        var run = new Fuse(list, options)
        var results = run.search(term)
        resolve(results)
    })
}

• term : 要搜尋的關鍵字
• list : 資料來源陣列
• options : 提供給Fuse.js的設定，亦即上述的各種屬性值

用法(例如僅搜尋來源資料的name屬性)：

runSearch(keyword) {
    this.$search(keyword, this.starwars, {
        keys: ['name']
    }).then(result => {
        this.results = result
    })
}

Sample code